<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/index.css">

<style>
	*{
		padding: 0;
        margin: 0;
	}
	html, body, #app {
		width: 100%;
		height: 100%;
		font-size: 14px;
	}
	.el-container{
		width: 100%;
		height: 100%;
	}
	.el-header{
		width: 100%;
		padding: 0%;
		background-color: rgba(101, 159, 6, 0.8);
		position: relative;
	}
	.el-header span{
		font-size: 30px;
		font-family: '微软雅黑';
		line-height: 60px;
		position: relative;
		left: 38%;
	}
	.el-aside{
		padding: 0%;
		height: 100%;
	}
	.el-menu{
		height: 100%;
	}
	.el-main{
		padding: 0%;
	}
	iframe{
		width: 100%;
        height: 100%;
	}
	.a1{
		position: absolute;
		top: 40%;
		right: 12%;
	}
	.tc{
		margin-left: 35%;
	}
	.logout-btn {
		cursor: pointer; /* 添加鼠标悬停时的手型图标 */
		font-weight: bold; /* 设置字体加粗 */
		/* 你可以根据需要添加更多样式 */
	}
</style>
</head>
<body>
	<div id="app">

		<el-container>
			<!--头部-->
			<el-header><span>刷题帮后台管理</span><span class="tc logout-btn" @click="ex">退出登录</span></el-header>
			<el-container>
				<!--左侧列表-->
				<el-aside width="200px">
					<el-menu ref="sidebarMenu" default-active="2" :unique-opened="true" class="el-menu-vertical-demo" @select="toPage"
						background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
						<!--首页-->
						<el-submenu index="we">
							<template slot="title">
								<i class="el-icon-s-shop"></i>
								<span>首页</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="welcome" @click="s">首页</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--用户管理-->
						<el-submenu index="user">
							<template slot="title">
								<i class="el-icon-user-solid"></i>
								<span>用户管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="user/show">用户显示</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--商品管理-->
						<el-submenu index="goods">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span slot="title">题目管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="goods/show">题目显示</el-menu-item>
								<el-menu-item index="goods/assess">题目审核</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--类别管理-->
						<el-submenu index="type">
							<template slot="title">
								<i class="el-icon-document"></i>
								<span slot="title">类别管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="type/index">类别管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--订单管理-->
						<el-submenu index="order">
							<template slot="title">
								<i class="el-icon-setting"></i>
								<span slot="title">群聊管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="order/index">群聊</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--错题-->
						<el-submenu index="noq">
							<template slot="title">
								<i class="el-icon-setting"></i>
								<span slot="title">错题建议</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="noq/index">建议</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--管理-->
						<el-submenu index="data">
							<template slot="title">
								<i class="el-icon-pie-chart"></i>
								<span slot="title">数据统计</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="data/show">系统统计</el-menu-item>
								<el-menu-item index="data/productdata">题目统计</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!--内容部-->
				<el-main>
					<iframe :src="url"></iframe>
				</el-main>
			</el-container>
		</el-container>
		
		</div>

<script src="../js/vue.js"></script>
<script src="./js/index.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
	
<script>
	let app = new Vue({
		el: '#app',
		data: {
			url: 'welcome.html',
			user: null
		},
		methods: {
			myinfo(){
				var jwt = sessionStorage.getItem("jwt");
				if(jwt == null || jwt == ""){
					location.href = "../../login.html";
					return;
				}
				axios.get("../../cloud-user/myinfo",{
					headers:{
						Authorization: jwt
					}
				}).then(res=>{
					if(res.data.code == 1){
						this.user = res.data.data;
						if(this.user.status !== "管理员"){
							sessionStorage.removeItem("jwt");
							location.href = "../../login.html";
						}
					}else{
						sessionStorage.removeItem("jwt");
						location.href = "../../login.html";
					}
				})
			},
			toPage(page){
				this.myinfo();
				this.url = page + '.html';
			},
			s(){
				this.url = 'data/show.html';
				setTimeout(()=>{
					this.url = 'welcome.html';
		        },1);
			},
			ex(){
				// 退出登录
				axios.get("../../cloud-user/logout").then(res=>{
					if(res.data.code == 1){
						//退出登录
						// 删除会话存储
						sessionStorage.removeItem("jwt");
						//跳转到登录界面
						location.href = "../../login.html";
					}else{
						this.$alert(res.data.msg);
					}
				});
			}
		},
		created(){
			this.myinfo();
		}
	});
</script>
<script>
window.addEventListener('message', function(event) {
	var jwt = sessionStorage.getItem("jwt");
	if(jwt == null || jwt == ""){
		location.href = "../../login.html";
		return;
	}
	axios.get("../../cloud-user/myinfo",{
		headers:{
			Authorization: jwt
		}
	}).then(res=>{
		if(res.data.code == 1){
			this.user = res.data.data;
			if(res.data.data.status !== "管理员"){
				sessionStorage.removeItem("jwt");
				location.href = "../../login.html";
			}
		}else{
			sessionStorage.removeItem("jwt");
			location.href = "../../login.html";
		}
	});
    if (event.data.action === 'changeSrc') {  
        var iframe = document.querySelector('.el-main iframe'); // 假设只有一个iframe  
        iframe.src = event.data.newSrc + '.html';
     // 更新侧边栏的激活状态
        const navLinks = document.querySelectorAll('.el-menu-item');
        app.$refs.sidebarMenu.updateActiveIndex(event.data.newSrc);
    }  
}, false);
</script>
</body>
</html>